<template>
	<u-list :height="screenHeight">
		<view>
			<view class="patient-box">
				<view class="patient-flex">
					<text class="patient-name">张三</text>
					<text class="patient-text">222</text>
				</view>
				<view class="patient-flex patient-sex">
					<text>张三</text>
					<text>222</text>
					<text>222</text>
				</view>
			</view>
			<view class="patient-box">
				<view class="patient-flex">
					<text class="patient-name">张三</text>
					<text class="patient-text">222</text>
				</view>
				<view class="patient-flex patient-sex">
					<text>张三</text>
					<text>222</text>
					<text>222</text>
				</view>
			</view>
			<view class="patient-box">
				<view class="patient-flex">
					<text class="patient-name">张三</text>
					<text class="patient-text">222</text>
				</view>
				<view class="patient-flex patient-sex">
					<text>张三</text>
					<text>222</text>
					<text>222</text>
				</view>
			</view>
			<view class="patient-box">
				<view class="patient-flex">
					<text class="patient-name">张三</text>
					<text class="patient-text">222</text>
				</view>
				<view class="patient-flex patient-sex">
					<text>张三</text>
					<text>222</text>
					<text>222</text>
				</view>
			</view>
			<view class="patient-box">
				<view class="patient-flex">
					<text class="patient-name">张三</text>
					<text class="patient-text">222</text>
				</view>
				<view class="patient-flex patient-sex">
					<text>张三</text>
					<text>222</text>
					<text>222</text>
				</view>
			</view>
			<view class="patient-box">
				<view class="patient-flex">
					<text class="patient-name">张三</text>
					<text class="patient-text">222</text>
				</view>
				<view class="patient-flex patient-sex">
					<text>张三</text>
					<text>222</text>
					<text>222</text>
				</view>
			</view>
			<view class="patient-box">
				<view class="patient-flex">
					<text class="patient-name">张三</text>
					<text class="patient-text">222</text>
				</view>
				<view class="patient-flex patient-sex">
					<text>张三</text>
					<text>222</text>
					<text>222</text>
				</view>
			</view>

			<!-- 底部按钮 -->
			<view class="sub-box">
				<view class="sub-btn"><u-button type="primary" @click="cancelBtn" color="#9eceff" text="取消"></u-button></view>
				<view class="sub-btn"><u-button type="primary" @click="goAddPatient" text="添加就诊人"></u-button></view>
			</view>
		</view>
	</u-list>
</template>

<script>
export default {
	data() {
		return {
			// 页面高度
			screenHeight: 0
		};
	},
	methods: {
		// 跳转添加就诊人
		goAddPatient() {
			uni.navigateTo({
				url: '../addPatient/addPatient'
			});
		},
		// 取消按钮
		cancelBtn() {
			uni.navigateBack({ delta: 1 });
		}
	},
	mounted() {
		//获取页面高度
		this.screenHeight = uni.getSystemInfoSync().windowHeight - 60; //获取当前页面的高度
	}
};
</script>

<style lang="less">
page {
	background-color: #fafafa;
	padding: 10rpx;
}
.patient-box {
	background-color: #ffffff;
	margin: 20rpx;
	border-radius: 15rpx;
	font-size: 28rpx;
	.patient-flex {
		display: flex;
		align-items: center;
		padding: 20rpx;
		.patient-name {
			font-size: 35rpx;
			font-weight: bold;
		}
		.patient-text {
			background-color: #d6f3ff;
			color: #78beff;
			padding: 2rpx 15rpx;
		}
	}
}
.patient-flex text {
	margin-right: 15rpx;
}
.patient-sex {
	color: #7c96af;
}
// 底部按钮
.sub-box {
	background-color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-top: 1rpx #f5f5f5 solid;
	padding: 0 26rpx;
	height: 120rpx;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	.sub-btn {
		width: 44%;
	}
}
</style>
